<template>
	<main>
		<section>
			<el-row>
				<h3>选择客户端</h3>
				<el-form :inline="true">
					<el-select v-model="currentClient" placeholder="选择客户端" @change="searchMails">
						<el-option v-for="client in clients" :key="client.id" :label="client.clientName" :value="client.id"></el-option>
					</el-select>
				</el-form>
			</el-row>
		</section>

		<!--提交表单-->
		<section>
			<el-row v-if="mailConfig.notFound && currentClient.id" class="mail-config-form">
				<h3>添加邮件配置</h3>
				<el-col :span="16">
					<el-form ref="form" :model="mailConfig" label-width="120px">
						<el-form-item label="用户">
							<el-input v-model="mailConfig.username"></el-input>
						</el-form-item>
						<el-form-item label="密码">
							<el-input type="password" v-model="mailConfig.password"></el-input>
						</el-form-item>
						<el-form-item label="主机地址">
							<el-input v-model="mailConfig.host"></el-input>
						</el-form-item>
						<el-form-item label="端口">
							<el-input v-model="mailConfig.port"></el-input>
						</el-form-item>
						<el-form-item label="需要授权">
							<el-switch v-model="mailConfig.auth" on-text="" off-text=""></el-switch>
						</el-form-item>
						<el-form-item align="right">
							<el-button type="primary" @click.native="create">确定</el-button>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
		</section>

		<!--编辑表单-->
		<section>
			<el-row v-if="mailConfig.id && currentClient" class="mail-config-form">
				<h3>邮箱配置编辑</h3>
				<el-col :span="16">
					<el-form ref="form" :model="mailConfig" label-width="120px">
						<el-form-item label="用户">
							<el-input v-model="mailConfig.username"></el-input>
						</el-form-item>
						<el-form-item label="密码">
							<el-input type="password" v-model="mailConfig.password"></el-input>
						</el-form-item>
						<el-form-item label="主机地址">
							<el-input v-model="mailConfig.host"></el-input>
						</el-form-item>
						<el-form-item label="端口">
							<el-input v-model="mailConfig.port"></el-input>
						</el-form-item>
						<el-form-item label="需要授权">
							<el-switch v-model="mailConfig.auth" on-text="" off-text=""></el-switch>
						</el-form-item>
						<el-form-item align="right">
							<el-button type="primary" @click.native="update">保存</el-button>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
		</section>

	</main>
</template>
<script>
	export default {
		name:'mail-config-management',
		data(){
			return {
				currentClient:null,
				clients:[],
				mailConfig:{},
				state:undefined,
				newMailConfig:{
					auth:false,
				}
			}
		},
		created(){ this.requestClients() },
		methods:{
			parseAuth(value){
				if(!value) return "不需要";
				else return "需要";
			},
			create(){
				this.$store.dispatch({
					type:'fetch',
					name:'createMailConfig',
					data:{
						cId:this.currentClient,
						...this.mailConfig,
					}
				}).then(res=>{
					if(res.errCode){
						this.$message({
							message:res.errMsg,
							type: 'error'
						});
					}else{
						this.$message({
							message:'提交成功',
							type: 'success'
						});
						this.mailConfig = res;
					}
				}).catch(error=>{
					this.$message({
						message:'连不上服务器',
						type: 'error'
					});
				})
			},
			update(){
				this.$store.dispatch({
					type:'fetch',
					name:'updateMailConfig',
					data:{
						...this.mailConfig,
					}
				}).then(res=>{
					if(res.errCode){
						this.$message({
							message:res.errMsg,
							type: 'error'
						});
					}else{
						this.$message({
							message:'编辑成功',
							type: 'success'
						});
						this.mailConfig = res;
						this.state = undefined;
					}
				}).catch(error=>{
					this.$message({
						message:'连不上服务器',
						type: 'error'
					});
				})
			},
			cancel(){
				this.state = undefined;
			},
			requestClients(){
				this.$store.dispatch({
					type:'fetch',
					name:'getClientList'
				}).then(res=>{
					if(res.errCode){
						this.$message({
							message:res.errMsg,
							type: 'error'
						});
					}else{
						this.clients = res;
					}
				}).catch(error=>{
					this.$message({
						message:'连不上服务器',
						type: 'error'
					});
				})
			},
			requestMails(id){
				this.$store.dispatch({
					type:'fetch',
					name:'getMailConfigByClient',
					data:{cId:id}
				}).then(res=>{
					if(res.errCode){
						this.$message({
							message:res.errMsg,
							type: 'error'
						});
					}else{
						if(res.id) this.mailConfig = res;
						else this.mailConfig = {
							notFound:true,
							auth:true,
						};
					}
				}).catch(error=>{
					this.$message({
						message:'连不上服务器',
						type: 'error'
					});
				})
			},
			searchMails:function(){
				this.mailConfig = {};
				this.requestMails(this.currentClient);
			}
		},
	}
</script>

<style lang="scss">
	.mail-config-form{
		margin-top: 50px;
		.label{
			width: 120px;
			text-align: right;
			vertical-align: middle;
			font-size: 14px;
			color: #48576a;
			line-height: 1;
			padding: 11px 1-2px 11px 0;
			box-sizing: border-box;
			display: inline-block;
			min-width: 100px;
			&:after{
				content:':'
			}
		}
	}
</style>
